<template>
  <div class="wrapper">
    <div class="search"
         @click="handleSkipSearch">
      <div class="iconfont back"
           @click="handleBack">&#xe6d7;</div>
      <div class="search-content">
        <span class="iconfont icon">&#xe62b;</span>
        <div class="search-shop">搜索商家</div>
      </div>
    </div>
    <result-tab></result-tab>
  </div>
</template>

<script>
import ResultTab from './components/tab'
export default {
  name: 'SearchResult',
  components: {
    ResultTab
  },
  methods: {
    handleSkipSearch () {
      this.$router.push({
        path: '/search'
      })
    },
    handleBack () {
      this.$router.back()
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'
.wrapper
  touch-action none
.search
  width 100%
  background-color $bgcOne
  height 100px
  display flex
  justify-content center
  align-items center
  padding()
  padding-top 24px

  .back
    width 100px
    height 100px
    line-height 100px
    font-size $fzThird
    color $whiteFzClor
    margin-right 20px

  .search-content
    width 100%
    border-radius 10px
    background-color #fff
    background-color #4DABF5
    height 100%
    display flex
    align-items center
    padding-left 40px
    box-sizing border-box

    .icon
      font-size $fzThird
      color $whiteFzClor
      margin-right 32px

    .search-shop
      font-size $fzThird
      color $whiteFzClor
</style>
